import React from "react";
import { connect } from "react-redux";
import { getHomeList } from "./actions";
// 如果 css 不进行 server 端渲的话，会出现样式抖动的情况
import * as styles from "../../styles/global.css";

// 服务器接受到请求， 这个时候 store 是空的；
// 服务器不会执行 componentDidMount 这个方法 所有列表的内容有 client 端渲染

// client 端代码运行，这个时候 store 依然是空的，
// client 执行的 componentDidMount ， 列表的数据被获取，
// store 中的数据被更新
// 客户端渲染出 store

class Home extends React.Component {
  constructor(props) {
    super(props)
    // 在 server 端才会有这个方法，客户端是没有这个方法的
    if (typeof window === "undefined") {
      // console.log(styles._getCss())
      // 如果我们在这里向 context 中注入 css 代码的话，那么我们在 server 端就可以获取到 css 样式
      this.props.staticContext.css.push(styles._getCss())
    }
  }

  // 这个生命周期函数不会在 server 端调用, 这里不能取消掉，
  // 因为如果第一次不是访问的 home 页面，那么服务端的数据就不会再次触发获取数据
  // 因为服务端渲染只是第一次访问进行服务器渲染， 之后前端的路由会交给前端
  componentDidMount() {
    this.props.getHomeList()
  }

  // 为了将前端和server端的数据是同步的；需要涉及到数据的 注水和脱水

  renderList() {
    return this.props.newsList.map(() => {

    })
  }


  render() {
    // console.log(this.props.newsList)
    // console.log(this.props);
    // 在 server 端， 可以获取到 staticContext 中
    return <div className={styles.test}>
      <p>这个是一个组件 home {this.props.name}</p>
      <button>click me</button>
    </div>
  }
}


const mapStateToProps = (state) => {
  return { name: state.home.name }
}

const mapDispatchToProps = (dispatch) => {
  return {
    getHomeList() {
      console.log("test")
      return dispatch(getHomeList())
    }
  }
}

// 给 Home 增加一个静态方法, 这个方法在 server 端渲染之前， 将这个路由需要的数据提前加载
// 这里是 server 端的 store 和 client 端的 store 不一致
Home.loadData = (store) => {
  // console.log("server loadData")
  return store.dispatch(getHomeList())
}

//  connect 过的 component, props 中有了 dispatch 属性
export default connect(mapStateToProps, mapDispatchToProps)(Home)